<template>
  <nav class="nav">
    <router-link class="tab-link" :class="active==1?'active':''" @click.native="activeHandle(1)" to="/">
      <span>文件</span>
    </router-link>
    <router-link class="tab-link" :class="active==2?'active':''" @click.native="activeHandle(2)" to="/helloWorld">
      <span>菜单2</span>
    </router-link>
  </nav>
</template>

<script>
  export default {
    name: 'Menus',
    data () {
      return {
        active: 2
      }
    },
    methods: {
      activeHandle: function (index) {
        this.active = index;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .nav {
    height: 40px;
    padding: 0 20px;
    color: #353535;
    background-color: #f8f8f8;
    border-bottom: solid 1px #e2e2e2;
    display: flex;
    align-items: flex-end;
  }

  .tab-link {
    padding: 8px 15px 5px 15px;
    color: #353535;
    text-decoration: none;
  }

  .active, .tab-link:hover {
    background-color: #a7cbff;
    color: #ffffff;
    text-decoration: none;
  }

  .active {
    background-color: #0e9aef;
  }
</style>
